<template>
  <div class="common-layout">
    <HeadContent title="审批休假"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="sizeSpace">


          <el-card style="width: 1400px" shadow="hover">
            <el-table :data="leaveList" style="width: 100%">
              <!-- <el-table-column fixed prop="date" label="编号" width="150" /> -->
              <el-table-column prop="username" label="申请人" width="130" />
              <el-table-column prop="type" label="休假类型" width="130" />
              <el-table-column prop="days" label="时长" width="130" />
              <el-table-column prop="beginTime" label="开始时间" width="250" />
              <el-table-column prop="endTime" label="结束时间" width="250" />
              <!-- <el-table-column prop="ways" label="原因" width="120" /> -->
              <el-table-column prop="status" label="状态" min-width="200" />
            </el-table>
          </el-card>

          <!-- 分页 -->

          <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
              :background="background" :disabled="disabled" layout="prev, pager, next, jumper" :total="1000"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </el-space>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// const flag = ref<boolean>(true)
import TagComtent from '@/components/TagComtent.vue'


//获取请假列表数据接口
const leaveList = ref<Leave[]>()
const getLeaveListFn = async () => {
  const res = await getLeaveList()
  leaveList.value = res.data
  for (let i = 0; i < leaveList.value!.length; i++) {
    //更改日期格式为`${year}-${month}-${day}`，原始日期为字符串
    const beginTime = leaveList.value![i].beginTime
    const endTime = leaveList.value![i].endTime
    newFunction(beginTime)
    newFunction(endTime)
    leaveList.value![i].beginTime = newFunction(beginTime)
    leaveList.value![i].endTime = newFunction(endTime)

  }
  
}
getLeaveListFn()


const sizeSpace = ref(40)

import type { ComponentSize } from 'element-plus'
import HeadContent from '@/components/HeadContent.vue'
import { newFunction, type Leave } from '@/model'
import { getLeaveList } from '@/api/leave'
const currentPage = ref(5)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 20px;
}

.el-card {
  overflow: hidden;
  /* 隐藏水平滚动条 */
}
</style>